<template>
    <view>
        <view class="header">
            <view class="title">逻辑学</view>
            <view class="sub-title">哲学类 > 逻辑学 国标代码010102</view>
        </view>
        <view class="nav">
            <view class="nav-item" :class="{ 'select': select === item.value }" v-for="item in navList" :key="item.value"
                @tap="select = item.value">{{ item.label }}</view>
        </view>
        <view>
            <major-introduce v-if="select === '1'" />
            <university-list v-if="select === '3'" />
            <major-rank v-if="select === '4'" />
        </view>
    </view>
</template>
  
<script>
import MajorIntroduce from './components/majorIntroduce.vue';
import UniversityList from '../components/universityList.vue';
import MajorRank from './components/majorRank.vue';
import { navList } from './data';
export default {
    components: {
        MajorIntroduce,
        UniversityList,
        MajorRank
    },
    data() {
        return {
            select: '1',
            navList
        };
    },
    methods: {
    }
};
</script>
  
<style lang="less" scoped>
@primary: #d01117;

.header {
    padding: 30upx;
    background-color: white;

    .title {
        font-size: 32upx;
        padding: 5upx 0;
    }

    .sub-title {
        color: #666666;
    }
}

.nav {
    padding: 0 30upx;
    background-color: white;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;


    .nav-item {
        height: 60upx;
        line-height: 60upx;
        position: relative;
    }

    .select {
        color: @primary;
    }

    .select::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 30upx;
        width: 50upx;
        height: 5upx;
        background-color: @primary;
    }
}
</style>